<template>
  <view class="container">
    <uni-segmented-control
      :current="current"
      :values="items"
      styleType="button"
      @clickItem="onClickItem"
    ></uni-segmented-control>

    <uni-table border stripe emptyText="暂无更多数据">
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" width="70">日期</uni-th>
        <uni-th align="center" width="70">开奖号</uni-th>
        <uni-th align="center" width="50">和值</uni-th>
        <uni-th align="center" width="50">跨度</uni-th>
        <uni-th align="center" width="80">大小形态</uni-th>
        <uni-th align="center" width="70">大小比</uni-th>
        <uni-th align="center" width="80">奇偶形态</uni-th>
        <uni-th align="center" width="70">奇偶比</uni-th>
        <uni-th align="center" width="80">质合形态</uni-th>
        <uni-th align="center" width="70">质合比</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td>{{ item.date }}</uni-td>
        <uni-td>{{ item.result }}</uni-td>
        <uni-td>{{ item.sumValue }}</uni-td>
        <uni-td>{{ item.span }}</uni-td>
        <uni-td>{{ item.sizeForm }}</uni-td>
        <uni-td>{{ item.sizeRatio }}</uni-td>
        <uni-td>{{ item.parityForm }}</uni-td>
        <uni-td>{{ item.parityRatio }}</uni-td>
        <uni-td>{{ item.zhiheForm }}</uni-td>
        <uni-td>{{ item.zhiheRatio }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useDatabase } from "../../hooks/useDatabase";

const { tableData: ticaiData } = useDatabase("ticai");
const { tableData: fucaiData } = useDatabase("fucai");

// 分段器数据
const current = ref(0);
const items = ["排三", "3D"];
const tableData = computed(() => (current.value == 0 ? ticaiData : fucaiData));

const onClickItem = (e) => {
  current.value = e.currentIndex;
};
</script>

<style lang="scss">
.container {
  .uni-table-td,
  .uni-table-th {
    font-size: 12px;
  }
}
</style>
